<!--
 * @Author: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @Date: 2022-05-25 16:28:55
 * @LastEditors: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @LastEditTime: 2022-05-30 20:00:56
 * @FilePath: \vue-2202\src\views\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="home">
    <div v-for="v in car" :key="v.id">
      <div class="card">
        <div class="cred-left">
          <van-checkbox v-model="v.completed"></van-checkbox>
        </div>
        <div class="cred-right">
          <van-card
            :price="v.price + '.00'"
            desc="描述信息"
            :title="v.title"
            :thumb="v.icon"
          />
        </div>
        <van-stepper v-model="v.count" />
      </div>
    </div>
    <van-submit-bar :price="getAllPice" button-text="提交订单">
      <input type="checkbox" :checked="checkedAll" value="全选" />
    </van-submit-bar>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState("car", ["car"]),
    ...mapGetters("car", ["getAllPice", "checkedAll"]),
  },
  data() {
    return { lunBo: [], checked: true };
  },
  methods: {},
  created() {},
};
</script>
<style lang="scss" scoped>
.home {
  padding: 10px;
  .card {
    display: flex;
    // flex-direction: column;
    // justify-content: center;
    align-items: center;

    border: 1px solid #eee;
    box-sizing: border-box;
    .cred-left {
      flex: 0.5;
      display: flex;
      justify-content: center;
    }
    .cred-right {
      flex: 3;
      .van-card {
        background-color: #fff;
      }
    }
  }
}
</style>
